import React, { Component } from 'react'
import ask from '../../../serve/api'
import queryString from 'query-string'
import { withRouter, Link } from 'react-router-dom'
import placeholder from './../../../images/placeholder.jpg'
import styles from './Title.module.scss'


export default withRouter(class Title extends Component {

  constructor(props){
    super();
    const {location} = props;
    const oSearch = queryString.parse(location.search);
    this.state = {
      orgId :  oSearch.orgId,
      loadState : 'pending',
      dataList : []
    }
  }
  
  componentDidMount() {
    // 动态列表
    this.fetchModelListData({ api: 'listOrgDynamic', params: { orgId: this.state.orgId, page: 1, pageSize: 5 } });
  }

  async fetchModelListData({api, params}){
    const { code, result } = await ask[api](params);
    try {
      if (code !== '000000') {
        throw new Error('数据出错');
      };

      this.setState({
        loadState : 'success',
        dataList : result || [],
      });

    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const {
      orgId,
      dataList,
    } = this.state;

    const topItem = dataList[0] || {};
    const leftItems = dataList.slice(1) || [];
    console.log(topItem)
    return (
      <div className={styles.main_title}>
        <div className={styles.title_container}>
          <h3>{topItem.title}</h3>
          <div className={styles.info}>
            <h1>{topItem.title}</h1>
            <span><Link to={`/org/project/pageDetail/${topItem.id}?orgId=${orgId}`}>【详情】</Link></span>
          </div>
          <div className={styles.news_list}>
            {leftItems.map((item, index) => {
              return (
                <span key={index} title={item.title}>
                  <Link to={`/mainPage/commonDetail/OrgDynamic/${item.id}?orgId=${orgId}`}>{item.title || ''}</Link>
                </span>
              )
            })}
          </div>
          <Link className={styles.more} to={`/org/orgDynamic/orgDynamicList/${orgId}`}>【更多动态...】</Link>
        </div>
        <img src={placeholder} alt=""/>
      </div>
    )
  }
})
